<template>
  <div class="center">
    <div class="up">
      <RecycleScroller
          class="scroller"
          :items="groupedItems"
          :item-size="80"
          key-field="groupKey"
      >
        <template #default="{item}">
          <div class="flex-row">
            <div
                class="bg-color-black item"
                v-for="subItem in item.items"
                :key="subItem.title"
            >
              <p class="ml-3 colorBlue fw-b">{{ subItem.title }}</p>
              <div>
                <dv-digital-flop class="dv-dig-flop ml-1 mt-1 pl-3" :config="subItem.config"/>
              </div>
            </div>
          </div>
        </template>
      </RecycleScroller>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, onMounted, ref, watch, computed, onBeforeUnmount} from 'vue'
import {RecycleScroller} from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import {useStore} from "vuex";

export default defineComponent({
  components: {
    RecycleScroller
  },
  // setup() {
  //   // 下层数据(大屏数据)
  //   const titleDate = [
  //     {
  //       number: 1020,
  //       text: '今年累计任务建次数'
  //     },
  //     {
  //       number: 18,
  //       text: '本月累计任务次数'
  //     },
  //     {
  //       number: 4,
  //       text: '今日累计任务次数'
  //     },
  //     {
  //       number: 71,
  //       text: '今年失败任务次数'
  //     },
  //     {
  //       number: 949,
  //       text: '今年失败成功次数'
  //     },
  //     {
  //       number: 811,
  //       text: '今年达标任务个数'
  //     },
  //   ]
  //   const titleItem = reactive([])
  //
  //   // 初始化数据
  //   onMounted(() => {
  //     setData()
  //   })
  //
  //   // 设置数据
  //   const setData = () => {
  //     titleDate.map(e => {
  //       titleItem.push({
  //         title: e.text,
  //         config: {
  //           number: [e.number],
  //           toFixed: 1,
  //           textAlign: 'left',
  //           content: '{nt}',
  //           style: {
  //             fontSize: 26
  //           }
  //         }
  //       })
  //     })
  //   }
  //   return {
  //     titleItem,
  //   }
  // }

  // setup() {
  //   // 定义你的数据
  //   const electricalMachineryStatus = ref(0);
  //   const externalEmergencyStop = ref(true);
  //   const primaryEmergencyStop = ref(true);
  //   const externalEmergencyStopIsRun = ref(true);
  //   const emptyTrayDetection = ref(true);
  //   const runSpeed = ref(10);
  //
  //   // 初始化数据
  //   const titleItem = reactive([]);
  //
  //   // 映射状态
  //   const statusMap = ['未运行', '运行正常', '电机故障'];
  //
  //   onMounted(() => {
  //     setData();
  //   });
  //
  //   // 监听状态变化并更新展示
  //   const statusChange = (val) => {
  //     setData();
  //   };
  //
  //   watch(electricalMachineryStatus, statusChange);
  //   watch(externalEmergencyStop, statusChange);
  //   watch(primaryEmergencyStop, statusChange);
  //   watch(externalEmergencyStopIsRun, statusChange);
  //   watch(emptyTrayDetection, statusChange);
  //   watch(runSpeed, statusChange);
  //
  //   // 设置数据
  //   const setData = () => {
  //     // 清空原有数据
  //     titleItem.splice(0, titleItem.length);
  //
  //     // 电机状态
  //     titleItem.push({
  //       title: '电机状态',
  //       config: {
  //         number: [electricalMachineryStatus.value],
  //         toFixed: 1,
  //         textAlign: 'left',
  //         content: statusMap[electricalMachineryStatus.value],
  //         style: {fontSize: 26},
  //       },
  //     });
  //
  //     // 外部急停按钮状态
  //     titleItem.push({
  //       title: '外部急停按钮状态',
  //       config: {
  //         number: [externalEmergencyStop.value ? 1 : 0],
  //         toFixed: 1,
  //         textAlign: 'left',
  //         content: externalEmergencyStop.value ? '被按下' : '未按下',
  //         style: {fontSize: 26},
  //       },
  //     });
  //
  //     // 主柜急停状态
  //     titleItem.push({
  //       title: '主柜急停',
  //       config: {
  //         number: [primaryEmergencyStop.value ? 1 : 0],
  //         toFixed: 1,
  //         textAlign: 'left',
  //         content: primaryEmergencyStop.value ? '被按下' : '未按下',
  //         style: {fontSize: 26},
  //       },
  //     });
  //
  //     // 外部急停按钮是否启动
  //     titleItem.push({
  //       title: '外部急停按钮是否启动',
  //       config: {
  //         number: [externalEmergencyStopIsRun.value ? 1 : 0],
  //         toFixed: 1,
  //         textAlign: 'left',
  //         content: externalEmergencyStopIsRun.value ? '已启动' : '未启动',
  //         style: {fontSize: 26},
  //       },
  //     });
  //
  //     // 空车检测是否启用
  //     titleItem.push({
  //       title: '空车检测是否启用',
  //       config: {
  //         number: [emptyTrayDetection.value ? 1 : 0],
  //         toFixed: 1,
  //         textAlign: 'left',
  //         content: emptyTrayDetection.value ? '启用' : '未启用',
  //         style: {fontSize: 26},
  //       },
  //     });
  //
  //     // 环线实际速度
  //     titleItem.push({
  //       title: '环线实际速度',
  //       config: {
  //         number: [runSpeed.value],
  //         toFixed: 1,
  //         textAlign: 'left',
  //         content: `${runSpeed.value} m/s`,
  //         style: {fontSize: 26},
  //       },
  //     });
  //   };
  //
  //   return {
  //     titleItem,
  //   };
  // },

  // setup() {
  //   // 定义你的数据
  //   const electricalMachineryList = ref([0, 1, 2,0,1]);
  //   const externalEmergencyStop = ref([true, false]);
  //   const externalEmergencyStopIsRun = ref([true, false]);
  //   const emptyTrayDetection = ref([true, false]);
  //   const runSpeed = ref(10);
  //
  //   // 初始化数据
  //   const titleItem = reactive([]);
  //
  //   // 映射状态
  //   const statusMap = ['未运行', '运行正常', '电机故障'];
  //
  //   onMounted(() => {
  //     setData();
  //   });
  //
  //   // 监听状态变化并更新展示
  //   const statusChange = (val) => {
  //     setData();
  //   };
  //
  //   watch(electricalMachineryList, statusChange, {deep: true});
  //   watch(externalEmergencyStop, statusChange, {deep: true});
  //   watch(externalEmergencyStopIsRun, statusChange, {deep: true});
  //   watch(emptyTrayDetection, statusChange, {deep: true});
  //   watch(runSpeed, statusChange);
  //
  //   // 设置数据
  //   const setData = () => {
  //     // 清空原有数据
  //     titleItem.splice(0, titleItem.length);
  //
  //     // 电机状态
  //     electricalMachineryList.value.forEach((status, index) => {
  //       titleItem.push({
  //         title: `电机#${index + 1}状态`,
  //         config: {
  //           number: [status],
  //           toFixed: 1,
  //           textAlign: 'left',
  //           content: statusMap[status],
  //           style: {fontSize: 26},
  //         },
  //       });
  //     });
  //
  //     // 外部急停按钮状态
  //     externalEmergencyStop.value.forEach((status, index) => {
  //       titleItem.push({
  //         title: `外部急停按钮#${index + 1}状态`,
  //         config: {
  //           number: [status ? 1 : 0],
  //           toFixed: 1,
  //           textAlign: 'left',
  //           content: status ? '被按下' : '未按下',
  //           style: {fontSize: 26},
  //         },
  //       });
  //     });
  //
  //     // 外部急停按钮是否启动
  //     externalEmergencyStopIsRun.value.forEach((status, index) => {
  //       titleItem.push({
  //         title: `外部急停按钮#${index + 1}是否启动`,
  //         config: {
  //           number: [status ? 1 : 0],
  //           toFixed: 1,
  //           textAlign: 'left',
  //           content: status ? '已启动' : '未启动',
  //           style: {fontSize: 26},
  //         },
  //       });
  //     });
  //
  //     // 空车检测是否启用
  //     emptyTrayDetection.value.forEach((status, index) => {
  //       titleItem.push({
  //         title: `空车检测#${index + 1}是否启用`,
  //         config: {
  //           number: [status ? 1 : 0],
  //           toFixed: 1,
  //           textAlign: 'left',
  //           content: status ? '启用' : '未启用',
  //           style: {fontSize: 26},
  //         },
  //       });
  //     });
  //
  //     // 环线实际速度
  //     titleItem.push({
  //       title: '环线实际速度',
  //       config: {
  //         number: [runSpeed.value],
  //         toFixed: 1,
  //         textAlign: 'left',
  //         content: `${runSpeed.value} m/s`,
  //         style: {fontSize: 26},
  //       },
  //     });
  //   };
  //
  //   const groupedItems = computed(() => {
  //     const itemsPerRow = 5;  // adjust as needed
  //     const temp = [...titleItem];
  //     const result = [];
  //     while (temp.length) {
  //       result.push({
  //         groupKey: result.length,  // unique key for each group
  //         items: temp.splice(0, itemsPerRow)
  //       });
  //     }
  //     return result;
  //   });
  //   return {
  //    groupedItems
  //   };
  // },

  setup() {
    // 初始化你的状态
    const electricalMachineryList = ref([0, 1, 2, 0, 1]);
    const externalEmergencyStop = ref([true, false]);
    const externalEmergencyStopIsRun = ref([true, false]);
    const emptyTrayDetection = ref([true, false]);
    const runSpeed = ref(10);

    const titleItem = reactive([]);

    const statusMap = ['未运行', '运行正常', '电机故障'];

    let ws

    onMounted(() => {
      setData()
      ws = new WebSocket('ws://100.100.100.200:18081/websockets/aibangplc');

      ws.onmessage = (event) => {
        const data = JSON.parse(event.data);
        // 每次只更新一个字段
        if (data.equipmentMsg.electricalMachineryList) {
          electricalMachineryList.value = data.equipmentMsg.electricalMachineryList;

        }
        if (data.equipmentMsg.externalEmergencyStop) {
          externalEmergencyStop.value = data.equipmentMsg.externalEmergencyStop;

        }
        if (data.equipmentMsg.externalEmergencyStopIsRun) {
          externalEmergencyStopIsRun.value = data.equipmentMsg.externalEmergencyStopIsRun;

        }
        if (data.equipmentMsg.emptyTrayDetection) {
          emptyTrayDetection.value = data.equipmentMsg.emptyTrayDetection;

        }
        if (data.equipmentMsg.runSpeed !== undefined) {
          runSpeed.value = data.equipmentMsg.runSpeed;
        }
        setData();
      };

      ws.onerror = (error) => {
        // Handle your error here
        console.log("plcWebSocket连接发生错误");
      };

      ws.onclose = (event) => {
        // Handle close event
        console.log("plcWebSocket连接关闭");
      };
    });

    onBeforeUnmount(() => {
      if (ws) {
        ws.close();
      }
    });

    //设置数据
    const setData = () => {
      // 清空原有数据
      titleItem.splice(0, titleItem.length);

      // 电机状态
      electricalMachineryList.value.forEach((status, index) => {
        titleItem.push({
          title: `电机#${index + 1}状态`,
          config: {
            number: [status],
            toFixed: 1,
            textAlign: 'left',
            content: statusMap[status],
            style: {fontSize: 26},
          },
        });
      });

      // 外部急停按钮状态
      externalEmergencyStop.value.forEach((status, index) => {
        titleItem.push({
          title: `外部急停按钮#${index + 1}状态`,
          config: {
            number: [status ? 1 : 0],
            toFixed: 1,
            textAlign: 'left',
            content: status ? '被按下' : '未按下',
            style: {fontSize: 26},
          },
        });
      });

      // 外部急停按钮是否启动
      externalEmergencyStopIsRun.value.forEach((status, index) => {
        titleItem.push({
          title: `外部急停按钮#${index + 1}是否启动`,
          config: {
            number: [status ? 1 : 0],
            toFixed: 1,
            textAlign: 'left',
            content: status ? '已启动' : '未启动',
            style: {fontSize: 26},
          },
        });
      });

      // 空车检测是否启用
      emptyTrayDetection.value.forEach((status, index) => {
        titleItem.push({
          title: `空车检测#${index + 1}是否启用`,
          config: {
            number: [status ? 1 : 0],
            toFixed: 1,
            textAlign: 'left',
            content: status ? '启用' : '未启用',
            style: {fontSize: 26},
          },
        });
      });

      // 环线实际速度
      titleItem.push({
        title: '环线实际速度',
        config: {
          number: [runSpeed.value],
          toFixed: 1,
          textAlign: 'left',
          content: `${runSpeed.value} m/s`,
          style: {fontSize: 26},
        },
      });
    };

    const groupedItems = computed(() => {
      const itemsPerRow = 5;  // adjust as needed
      const temp = [...titleItem];
      const result = [];
      while (temp.length) {
        result.push({
          groupKey: result.length,  // unique key for each group
          items: temp.splice(0, itemsPerRow)
        });
      }
      return result;
    });
    return {
      groupedItems
    };
  },
})
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  flex-direction: column;


  .up {
    width: 100%;
    display: flex;

    /* Hide scrollbar */
    ::-webkit-scrollbar {
      display: none;
    }

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */

    .scroller {
      overflow: auto;
      width: 100%;
      height: 150px; // 设置虚拟滚动列表的高度
    }


    .flex-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    .item {
      flex: 1 0 auto;
      border-radius: 6px;
      padding-top: 8px;
      margin-top: 8px;
      width: 19%;
      height: 70px;

      .dv-dig-flop {
        width: 160px;
        height: 30px;
      }
    }

  }

  //.down {
  //  padding: 6px 4px;
  //  padding-bottom: 0;
  //  width: 100%;
  //  display: flex;
  //  height: 255px;
  //  justify-content: space-between;
  //
  //  .bg-color-black {
  //    border-radius: 5px;
  //
  //  }
  //
  //  .ranking {
  //    padding: 10px;
  //    width: 59%;
  //
  //    .dv-scr-rank-board {
  //      height: 220px;
  //    }
  //  }
  //
  //  .percent {
  //    width: 40%;
  //    display: flex;
  //    flex-wrap: wrap;
  //
  //    .item {
  //      width: 50%;
  //      height: 120px;
  //
  //      span {
  //        margin-top: 8px;
  //        font-size: 14px;
  //        display: flex;
  //        justify-content: center;
  //      }
  //    }
  //
  //    .water {
  //      width: 100%;
  //
  //      .dv-wa-le-po {
  //        height: 120px;
  //      }
  //    }
  //  }
  //}
}
</style>
